<template>
    <nav id="nav">
        <router-link class="nav-item" to="/goods">点餐<i class="line"></i></router-link>
        <router-link class="nav-item" to="/ratings">评论({{commentNum}})<i class="line"></i></router-link>
        <router-link class="nav-item" to="/seller">商家<i class="line"></i></router-link>
    </nav>
</template>

<script>
    export default {
        name: 'Nav',
        props: ['commentNum'],
        data() {
            return {
                // 
            }
        }
    }
</script>

<style scoped>
    #nav {
        display: flex;
        width: 100%;
        height: 40px;
        line-height: 40px;
        border-bottom: 1px solid #e4e4e4;
    }
    
    .nav-item {
        flex: 1;
        text-align: center;
        font-size: 13px;
        text-decoration: none;
        color: #666;
        position: relative;
    }
    
    .active {
        color: #ffbb22;
    }
    
    .active .line {
        width: 30px;
        height: 2px;
        display: inline-block;
        background-color: #ffbb22;
        position: absolute;
        left: 50%;
        bottom: 0;
        margin-left: -15px;
    }
</style>